<!--
 * @Author: 杨三炮
 * @Date: 2021-12-03 17:24:33
 * @LastEditors: 杨三炮
 * @LastEditTime: 2021-12-04 09:30:19
 * @FilePath: \daka\src\views\Daka.vue
-->
<template>
  <div class="w-full px-3 pb-4">
    <!-- 标题 -->
    <div class="title w-full text-center">
      <h3 class="text-2xl">每日健康登记</h3>
    </div>
    <!-- 日期 打卡信息  名字 -->
    <van-row class="mt-3">
      <van-col span="8"> 日期:{{ dayDate }} </van-col>
      <van-col span="5" offset="1">
        <van-radio-group v-model="istrue">
          <van-radio name="yes" checked-color="#ee0a24" disabled>{{
            daka
          }}</van-radio>
        </van-radio-group></van-col
      >
    </van-row>
    <!-- 高风险地区  打卡记录 -->
    <van-row class="mt-3">
      <van-col span="10"><a href="">查看高、中风险地区</a></van-col>
      <van-col span="6" offset="8"><h1 @click="record">打卡记录</h1></van-col>
    </van-row>
    <!-- 1.关于新馆肺炎，你当前的状况是？(多选) -->
    <div class="px-3 mt-3">
      <h1>1.关于新馆肺炎，你当前的状况是？(多选)</h1>
      <div class="w-full one bg-white mt-2">
        <van-checkbox-group v-model="formData.current">
          <template v-if="istrue">
            <van-checkbox
              v-for="item in getData.current"
              disabled
              :name="item.current_id"
              :key="item.current_id"
              shape="square"
              >{{ item.title }}</van-checkbox
            >
          </template>

          <template v-else>
            <van-checkbox
              v-for="item in getData.current"
              :name="item.current_id"
              :key="item.current_id"
              shape="square"
              >{{ item.title }}</van-checkbox
            >
          </template>
        </van-checkbox-group>
      </div>
    </div>
    <!-- 2.核酸检测情况(单选) -->
    <div class="p-3">
      <h1>2.核酸检测情况(单选)</h1>
      <div class="w-full bg-white mt-2 two">
        <van-radio-group v-model="formData.hesuan">
          <template v-if="istrue">
            <van-radio
              v-for="item in getData.hesuan"
              :name="item.hesuan_id"
              disabled
              :key="item.hesuan_id"
              >{{ item.title }}</van-radio
            >
          </template>
          <template v-else>
            <van-radio
              v-for="item in getData.hesuan"
              :name="item.hesuan_id"
              :key="item.hesuan_id"
              >{{ item.title }}</van-radio
            >
          </template>
        </van-radio-group>
      </div>
    </div>
    <!-- 3.健康码(单选) -->
    <div class="p-3">
      <h1>3.健康码(单选)</h1>
      <div class="w-full three bg-white mt-2">
        <van-radio-group v-model="formData.jiankangma">
          <template v-if="istrue">
            <van-radio
              v-for="item in getData.jiankangma"
              :name="item.jiankangma_id"
              :key="item.jiankangma_id"
              disabled
              >{{ item.title }}</van-radio
            >
          </template>
          <template v-else>
            <van-radio
              v-for="item in getData.jiankangma"
              :name="item.jiankangma_id"
              :key="item.jiankangma_id"
              >{{ item.title }}</van-radio
            >
          </template>
        </van-radio-group>
      </div>
    </div>
    <!-- 4.你的当前所在地 -->
    <div class="p-3">
      <h1>4.你的当前所在地</h1>
      <div class="w-full bg-white shadow-md p-4 mt-2">
        <van-button v-if="!formData.place" @click="getLocation"
          >点我获取位置</van-button
        >
        <span v-else>{{ formData.place }}</span>
      </div>
    </div>
    <!-- 提交 -->
    <van-button v-if="istrue == ''" type="primary" block @click="submitForm"
      >提交</van-button
    >

    <!-- 打卡记录 pop框 -->
    <van-popup
      v-model="dataListShow"
      round
      position="bottom"
      bind:close="onClose"
      class="record"
    >
      <h1 class="title text-center pb-3 mt-5">近30天记录</h1>

      <van-empty v-if="!recordData" description="还没打过卡哦！！" />
      <template v-else>
        <div
          v-for="item in recordData"
          :key="item.health_id"
          class="w-full px-3"
        >
          <div class="border-b-2 border-gray-200 p-3">
            <h2
              v-for="(info, index) in item.current"
              :key="index"
              class="text-sm"
            >
              {{ getData.current[index].title }}
            </h2>
            <p class="text-xs text-green-600 mt-1">时间：{{ item.time }}</p>
            <p class="text-xs text-green-600 mt-1">地点：{{ item.place }}</p>
          </div>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script>
import dayjs from 'dayjs';

export default {
  name: 'Daka',
  data () {
    return {
      user: '', 
      //表单数据
      formData: {
        current: [],  //1.多选框
        hesuan: '',   //2.是否做核酸
        jiankangma: '', //3.健康码
        place: '',  //4.当前位置
        sno: ''     //5.学号
      },
      //获取用户登录的时候的学号
      getUserInfo: {
        sno: ''
      },
      showPop: false, //是否显示登录Pop框
      istrue: '',     //是否打卡单选
      dayDate: '',    //当前日期
      //获取的信息列表
      getData: {
        current: '',
        hesuan: '',
        jiankangma: '',
      },
      dataListShow: false,    //是否显示打卡记录的pop框
      recordData: '',     //打卡记录
    }
  },
  computed: {
    daka () {
      return this.istrue == '' ? '未打卡' : '已打卡'
    },

  },

  created () {
    /* 格式化当前日期 */
    this.dayDate = dayjs(Date.now()).format('YYYY-MM-DD')
    //获取疫情信息
    this.getlist()
    const userinfo = JSON.parse(localStorage.userInfo)
    console.log(userinfo);
    //token存储到vuex中
    this.$store.dispatch('setAuthenticated', userinfo)
    this.$store.dispatch('setUser', userinfo)
    this.user = this.$store.getters.user
    this.formData.sno = this.user.stu_id

    //是否打卡
    this.isdaKa()
  },

  methods: {
    /* 
      获取选项列表
    */
    async getlist () {
      //获取疫情信息列表并动态渲染
      const { data: current } = await this.$Axios.get('current')
      const { data: hesuan } = await this.$Axios.get('hesuan')
      const { data: jiankangma } = await this.$Axios.get('jiankangma')
      this.getData.current = current
      this.getData.hesuan = hesuan
      this.getData.jiankangma = jiankangma
    },
    /**获取地图定位*/
    getLocation () {
      var geolocation = new window.BMap.Geolocation();
      let _that = this
      let place = ''
      geolocation.getCurrentPosition(function (result) {
        if (this.getStatus() == window.BMAP_STATUS_SUCCESS) {
          _that.province = result.address.province
          _that.city = result.address.city
          _that.district = result.address.district
          place = `${_that.province}${_that.city}${_that.district}`
          _that.formData.place = place
          console.log(result);
        }
      });

    },

    /* 查看用户今天是否打卡 */
    async isdaKa () {
      //发送请求获取当前信息
      const { data } = await this.$Axios.post('istrue', this.user)
      console.log(data);
      //如果返回的值不为空
      if (data.code) {
        //动态设置多选框和单选框的数据
        this.formData.current = data.result.current
        this.formData.hesuan = data.result.hesuan
        this.formData.jiankangma = data.result.jiankangma
        this.formData.place = data.result.place
        this.istrue = data.code
      }
    },
    //提交数据
    async submitForm () {

      //判断是否已全部做选择
      if (this.formData.currentResult == '' ||
        this.formData.hesuanResult == '' ||
        this.formData.jiankangmaResult == '' ||
        this.formData.place == '') {
        this.$toast.fail('请认真填写所有信息')
        return
      }
      //发送请求 
      const { data } = await this.$Axios.post('daka', this.formData)
      if (data) {
        this.$toast.success('打卡成功')
        this.isdaKa()
      }
    },
    /* 获取打卡记录 */
    async record () {
      //判断是否登录
      if (!localStorage.userInfo) {
        this.$toast.fail('请先登录')
        this.showPop = true
        return
      }
      //发送请求获取打卡记录
      const { data } = await this.$Axios.get(`record/${this.formData.sno}`)
      if (data.result.length) {
        this.recordData = data.result
      }
      //关闭pop弹窗
      this.dataListShow = !this.dataListShow
    },

  },

}
</script>

<style scoped>
body {
  width: 100%;
}

.one >>> .van-checkbox-group > .van-checkbox > .van-checkbox__label {
  @apply text-red-600  mt-2 text-sm;
}
.one >>> .van-checkbox-group > .van-checkbox:first-child .van-checkbox__label {
  @apply text-green-600;
}
.two >>> .van-radio__label {
  @apply text-green-600 mt-2;
}

.three >>> .van-radio__label {
  @apply text-red-600 mt-2;
}
.three >>> .van-radio:first-child .van-radio__label {
  @apply text-green-600;
}

.one >>> .van-checkbox-group > .van-checkbox,
.two >>> .van-radio,
.three >>> .van-radio {
  @apply px-3 py-1;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.record {
  max-height: 70%;
}
</style>
